<template>
    <div class="page-container">
        <!-- 顶部导航栏 -->
        <el-container>
            <el-header class="header">
                <el-menu :default-active="activeIndex" class="nav-menu" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1" @click="gethome">首页</el-menu-item>
                    <el-menu-item index="2">博文</el-menu-item>
                    <el-menu-item index="3">视频</el-menu-item>
                    <el-sub-menu index="4">
                        <template #title>下载</template>
                        <el-menu-item index="4-1">资源1</el-menu-item>
                        <el-menu-item index="4-2">资源2</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="5">行业动态</el-menu-item>
                    <el-menu-item index="6">干货分享</el-menu-item>
                    <el-sub-menu index="7">
                        <template #title>课程</template>
                        <el-menu-item index="7-1">课程1</el-menu-item>
                        <el-menu-item index="7-2">课程2</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="8">
                        <template #title>店铺</template>
                        <el-menu-item index="8-1">商品1</el-menu-item>
                        <el-menu-item index="8-2">商品2</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="9">
                        <template #title>个人中心</template>
                        <el-menu-item index="9-1">个人信息</el-menu-item>
                        <el-menu-item index="9-2">我的课程</el-menu-item>
                        <el-menu-item index="9-3">购物车</el-menu-item>
                        <el-sub-menu index="10">
                            <template #title>我的订单</template>
                            <el-menu-item index="9-1">所有订单历史</el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="9-4">我的账户</el-menu-item>
                        <el-menu-item index="9-4">我的好友</el-menu-item>
                        <el-menu-item index="9-4">收藏夹</el-menu-item>
                        <el-menu-item index="9-4">我的私信</el-menu-item>
                        <el-menu-item index="9-4">通知</el-menu-item>
                        <el-menu-item index="9-4" @click="logout">退出登录</el-menu-item>
                    </el-sub-menu>
                </el-menu>
                <el-input class="input" placeholder="搜索" suffix-icon="el-icon-search" size="small"></el-input>
                <Search style="width: 1em; height: 1em; margin-right: 8px; color:#409efc" />
                <el-icon style="width: 1em; height: 1em; margin-right: 8px; color:#409efc">
                    <ShoppingCart />
                </el-icon>
                <span style="color: black;">￥0.00</span>
            </el-header>
        </el-container>
        <!-- 中间展示区 -->
        <div class="main-content" v-for="(userinfo, index) in user" :key="index">
            <el-image class="bg-image" :src="bgImageSrc" fit="cover" />
            <div class="avatar-container">
                <el-upload class="avatar-uploader" action="http://uc.qiniuapi.com" :show-file-list="false"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="avatarSrc" :src="avatarSrc" class="avatar" :width="178" :height="178"/>
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <div class="setting-btn">
                    <el-icon style="width: 1em;height: 2em;color:#409efc">
                        <Setting />
                    </el-icon>
                </div>
            </div>
            <el-row class="info-row">
                <el-col :span="12">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-user">
                            <el-icon>
                                <User />
                            </el-icon>
                            关于
                        </el-button>
                        <el-button type="primary" icon="el-icon-chat-round">
                            <el-icon>
                                <ChatRound />
                            </el-icon>
                            评论
                        </el-button>
                    </el-button-group>
                </el-col>
            </el-row>
            <el-form-item label="昵称">
                {{ userinfo.username }}
            </el-form-item>
        </div>
        <el-container>
            <el-aside width="200px">
                <el-menu class="el-menu-vertical-demo" router :default-active="activeMenu" @open="handleOpen"
                    @close="handleClose">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>分类管理</span>
                        </template>
                        <el-menu-item index="/category/add">添加分类</el-menu-item>
                        <el-menu-item index="/category/put">修改分类</el-menu-item>
                        <el-menu-item index="/category/select">查询分类</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <EditPen />
                            </el-icon>
                            <span>标签管理</span>
                        </template>
                        <el-menu-item index="/addtag">添加标签</el-menu-item>
                        <el-menu-item index="/selecttag">查询标签</el-menu-item>
                        <el-menu-item index="/puttag">修改标签</el-menu-item>
                        <el-menu-item index="/deletag">删除标签</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <document />
                            </el-icon>
                            <span>博客管理</span>
                        </template>
                        <el-menu-item index="/myblog">个人博客</el-menu-item>
                        
                        <el-menu-item index="/addblog">发布博客</el-menu-item>
                        <el-menu-item index="/deleblog">回收站</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon>
                                <setting />
                            </el-icon>
                            <span>信息管理</span>
                        </template>
                        <el-menu-item index="/personal">个人信息</el-menu-item>
                        <el-menu-item index="/putpwd">修改密码</el-menu-item>
                        <el-menu-item index="/uoload">修改头像</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </div>

</template>

<script lang="ts" setup >
import { onMounted, ref } from 'vue'
import { ShoppingCart, Search, Setting, ChatRound, User } from '@element-plus/icons-vue'
import request from '@/request'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, type UploadProps } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeMenu = ref('')
const handleOpen = ref('')
const handleClose = ref('')
// 导航栏激活项
const activeIndex = ref('1')
// 背景图片地址，需替换为实际地址
const bgImageSrc = ref('https://www.mr-wu.cn/wp-content/uploads/2020/08/page_title_figure_03.svg')
// 头像图片地址，需替换为实际地址
const avatarSrc = ref('https://www.mr-wu.cn/wp-content/uploads/2025/06/e39a9994e23a837ea43370dd9f9f9ce2.png')

const handleSelect = (key : File, keyPath : File) => {
    console.log(key, keyPath)
}

let user = ref([])
onMounted(() => {
  request({
    method: 'GET',
    url: 'users/userinfo/'
  }).then(resp => {
    if (Array.isArray(resp.data.users)) {
      user.value = resp.data.users;
      // console.log('用户信息:', resp.data.article_list);
    } else {
      console.error('后端返回的users不是数组类型');
    }
  }).catch(error => {
    console.log('文章显示失败', error);
  });
});

function upoloadImg (rawFile : File) {
    const formData = new FormData()
    formData.append('file', rawFile)
    // request 发起请求
    request.post('http://127.0.0.1:8000/users/qiniu_token/', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }).then(res => {
        console.log("res>>>>>", res.data.url)
        avatarSrc.value = res.data.url
    }).catch(err => {
        console.log("err>>>>>", err)
    })
}

// 上传前对图片校验，图片的格式和大小
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    console.log("rawFile>>>>>>", rawFile)
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    // 校验完成调用上传的方法
    upoloadImg(rawFile)
    return true
}

// 跳转首页
const gethome = () => {
    router.push('/')
}
// 退出登录
function logout() {
    router.push('/')
}
</script>

<style scoped>
.page-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    background: linear-gradient(to right);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.nav-menu {
    flex: 1;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
}

.bg-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.avatar-container {
    position: relative;
}

.input {
    width: 300px;
}

.avatar {
    position: absolute;
    bottom: -50px;
}

.setting-btn {
    position: absolute;
    top: 0;
    right: -680px;
}

.info-row {
    width: 100%;
    margin-top: 50px;
}
</style>